<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}" >
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot.css}">

</head>
<body>
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini " >
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href=""  th:href="@{/}" class=" m-item item m-mobile-hidden" th:classappend="${n==1}? 'active'"><i class="home icon" ></i> 首页</a>
            <a href="" th:href="@{/types/-1}" class="m-item item m-mobile-hidden" th:classappend="${n==2}? 'active'"><i class="folder outline icon"></i> 分类</a>
            <a href="" th:href="@{/tags/-1}" class="m-item item m-mobile-hidden" th:classappend="${n==3}? 'active'"><i class="tags icon"></i> 标签</a>
            <a href="" th:href="@{/archives}" class="m-item item m-mobile-hidden" th:classappend="${n==4}? 'active'"><i class="clone icon"></i> 归档</a>
            <a href="" th:href="@{/about}" class="m-item item m-mobile-hidden" th:classappend="${n==5}? 'active'"><i class="info icon"></i> 关于我</a>
            <a href="" th:href="@{/admin}" class="m-item item m-mobile-hidden" th:classappend="${n==6}? 'active'"><i class="user plus icon"></i> 后台管理</a>
            <div class="right m-item item m-mobile-hidden">
                <form name="search" action="" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon input">
                        <input type="text"  name="query" th:value="${query}" placeholder="亲亲在这儿搜索">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>

    </a>
</nav>
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" th:src="@{/images/weixinaddfriend.png}"  class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column" >
                <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
                <div id="newblog-container">
                    <div class="ui inverted link list" th:fragment="newblogList">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事（User Story）</a>
                        <!--/*-->
                        <a href="#" class="item m-text-thin">用户故事（User Story）</a>
                        <a href="#" class="item m-text-thin">用户故事（User Story）</a>
                        <!--*/-->
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin" th:text="#{index.email}">18366@qq.com</a>
                    <a href="#" class="item m-text-thin" th:text="#{index.qq}">1836660548</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini" th:text="#{index.blogDescription}">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
       </div>
        <div class="ui center aligned container">
            <p class="m-text-thin m-text-spaced m-opacity-tiny"> © 2019 - <span th:text="${#dates.year(#dates.createNow())}">2020</span>  Designed by 垚垚</p>

            <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
            <script>
                var now = new Date();
                function createtime() {
                    var grt= new Date("11/11/2019 17:38:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
                    now.setTime(now.getTime()+250);
                    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
                    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
                    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
                    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
                    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
                    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
                    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
                }
                setInterval("createtime()",500);
            </script>
            <div>
                <a href=http://www.beian.miit.gov.cn/>晋ICP备19010799号-1</a>
            </div>

            <div  style="width:300px;margin:0 auto; padding:20px 0;">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=14078102000057"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img src="beian.png" th:src="@{/images/beian.png}" style="float:left;"/>
                    <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">晋公网安备 14078102000057号</p></a>
            </div>


        </div>




    </div>

</footer>


<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <script src="http://www.lmlblog.com/winter/templets/xq/js/snowy.js"></script>
        <script src="http://www.lmlblog.com/blog/12/js/Snow.js"></script>
    <script>
        $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");
    </script>
    <script type="text/javascript">
        var browser = {
            versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {     //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (browser.versions.mobile) {
            //执行移动端的相关代码
            //alert("移动端");
            //设置移动端不显示网易云音乐插件
            /*      onload = function () {
                      var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                      MusicDivShow.style.display = 'none';//控制层隐藏
                  };*/
        }else if(!browser.versions.mobile){ //非移动端，动态加载js和div
            //设置电脑端显示网易云音乐插件
            onload = function () {
                /*var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                MusicDivShow.style.display = 'block';//控制层显示*/
            };
            // var script1 = document.createElement('script');
            // script1.type = 'text/javascript';
            // script1.src = '\\js\\snow.js';

            <!-- 天气预报 -->
            WIDGET = {FID: 'EtgqPWMbdv'}
            var script4 = document.createElement('script');
            script4.type = 'text/javascript';
            script4.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111';

            var script2 = document.createElement('script');
            script2.type = 'text/javascript';
            script2.src = '\\js\\click_show_text.js';

            var script3 = document.createElement('script');
            script3.type = 'text/javascript';
            script3.color = '220,220,220';
            script3.opacity = '0.7';//透明度
            script3.zIndex = '-2';
            script3.count = '200';
            script3.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';

            /*live-2D*/


            // $('body').append(script1);
            $('body').append(script4);
            $('body').append(script2);
            $('body').append(script3);
        }
    </script>
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("06/01/2020 17:38:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
            document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()",500);
    </script>
</th:block>

</body>
</html>